import React, { useRef, useState} from 'react';
import ProTable from '@ant-design/pro-table';
import {ActionType, ProColumns} from '@ant-design/pro-table/lib/Table';
import {SorterResult} from 'antd/es/table/interface';
import {IOrganizeTableItem} from '@/pages/data.d';
import {ConnectState} from "@/models/connect";
import {connect, Dispatch} from 'umi';

interface UserProps {
  dispatch: Dispatch;
}

const OrganizeList: React.FC<UserProps> = (props) => {
  const [queryParams, setQueryParams] = useState<{}>({});
  const [sorter, setSorter] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<IOrganizeTableItem>[] = [
    {
      title: '部门编码',
      dataIndex: 'code',
      hideInSearch: true
    },
    {
      title: '部门名称',
      dataIndex: 'department',
      hideInForm: true,
    },
    {
      title: '管理者',
      dataIndex: 'admin',
    },
  ];


  const testDataSource =[
    {  
      code: 222,
      department: '卓越教育集团/集团总部/互联网管理中心',
      admin: '小豪',
    },
    {  
      code: 333,
      department: '卓越教育集团/集团总部/互联网管理中心',
      admin: '小豪',
    },
    {  
      code: 444,
      department: '卓越教育集团/集团总部/互联网管理中心',
      admin: '小豪',
    }
  ]

    // 获得表格滚动区域高度
    let tabelScroll = 300;
    const wrapperRef = useRef<any>();
  
    if (wrapperRef && wrapperRef.current) {
      tabelScroll = wrapperRef.current.scrollHeight - 280;
    }
  

  return (
    <div>
      <ProTable<IOrganizeTableItem>
        actionRef={actionRef}
        rowKey="code"
        scroll={{y: tabelScroll}}
        options={{
          fullScreen: true,
          reload: false,
          setting: true,
          density: true,
        }}
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<IOrganizeTableItem>;

          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{
          sorter,
        }}
        dataSource={testDataSource.filter((value) => {
          const keys = Object.keys(queryParams);
          if (keys.length === 0) {
            return true;
          } else {
            for (let i in keys) {
              const key = keys[i];
              if (value[key].toString().indexOf(queryParams[key]) === -1) {
                return false;
              }
            }
          }
          return true;
        })}
        onSubmit={(params) => {
          setQueryParams(params)
        }}
        columns={columns}
      />
    </div>
  );
};
export default connect(({}: ConnectState) => ({

}))(OrganizeList);
